<template>
	<view class="content">
		<form @submit="submit" @reset="reset_receiver">
			<!-- 无寄件信息显示 -->
			<view class="msg_box" v-show="!sender_msg_show" @click="go_add_sender_msg">
				<view class="sender_msg_box_title">
					<img src="../../static/image/creat_icon_jijian@2x.png" alt="">
					<view>寄件信息</view>
				</view>
				<view class="sender_msg_tips">
					您当前未设置寄件信息，请完成设置后，再创建订单！
				</view>
				<view class="add_sender_btn">添加寄件信息</view>
			</view>
			<!-- 有寄件信息显示 -->
			<view class="msg_box" v-show="sender_msg_show">
				<view class="sender_msg_box_title">
					<img src="../../static/image/creat_icon_jijian@2x.png" alt="">
					<view>寄件信息</view>
				</view>
				<view class="sender_msg_box">
					<view class="sender_msg">
						<view class="sender_name">{{sender_info.sender_name}}</view>
						<view class="sender_phone">{{sender_info.sender_phone}}</view>
					</view>
					<view class="sender_address">
						<text>{{sender_info.sender_province_text}}</text>
						<text>{{sender_info.sender_city_text}}</text>
						<text>{{sender_info.sender_district_text}}</text>
						<text>{{sender_info.sender_address}}</text>
					</view>
				</view>
			</view>
			<!-- 收件信息 -->
			<view class="receiver_msg_box" v-show="sender_msg_show">
				<view class="receiver_msg_box_title">
					<view class="receiver_msg_title">
						<img src="../../static/image/creat_icon_shoujian@2x.png" alt="">
						<view>收件信息</view>
					</view>
					<view class="paste_btn" @click="paste">粘贴识别</view>
				</view>
				<view class="name_phone_box">
					<input type="text" v-model="receiver_name" name="receiver_name" class="name" placeholder="请输入姓名" placeholder-style="color:#999999;">
					<input type="text" v-model="receiver_phone" name="receiver_phone" class="phone" placeholder="请输入11位手机号或固话" placeholder-style="color:#999999;">
				</view>
				<view class="uni-list-cell-db">
					<view>吉林省 长春市 </view>
					<picker @change="bindPickerChange" name="txt" :value="array[index]" :range="array">
						<view class="placeholder" v-show = "!addr_show">请选择区</view>
						<view class="uni-input"  v-show = "addr_show">{{'&nbsp;' + array[index]}}</view>
					</picker>
				</view>
				<input type="text" class="address" v-model="receiver_address" name="receiver_address" placeholder="请输入详细地址" placeholder-style="color:#999999;">
				<button form-type="reset" class="reset_btn">清空</button>
				<view class="fenge"></view>
				<input type="text" class="address" v-model="receiver_remark" name="receiver_remark" placeholder="请输入备注" placeholder-style="color:#999999;"> 
				<view class="agent_fee_box" v-show="agency_fund_show">
					<view class="agent_fee_title">代收货款：</view>
					<input type="digit" class="agent_fee" @input="oninput" v-enter-number="" name="agent_fee" v-model="agent_fee" placeholder="请输入金额" placeholder-style="color:#ffffff;">元
				</view>
				<view v-show="agency_fund_show" class="large_number">大写：{{smallToBig(agent_fee)}}</view>
			</view>
			<button form-type="submit" class="submit_btn">确定创建</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				// 寄件信息显示
				sender_msg_show: null,
				sender_info: {},
				// 收件人信息
				receiver_name: '',
				receiver_phone: '',
				receiver_province: '',
				receiver_city: '',
				receiver_district: '',
				receiver_address: '',
				receiver_remark: '',
				agent_fee: '',
				// 选择省市区
				txt: '请选择省市区',
				addr_show: false,
				agency_fund_show: true,
				index: 0,
				array: [],
			}
		},
		onShow() {
			// 获取token
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					// 获取是否有寄件人信息与是否可以代收货款
					this.$https.get(`api/mini_customer/v1/base/create_order_permit?token=${res.data}`)
					.then(res => {
						// 有寄件人信息
						if (res.data.sender_info_integer){
							this.sender_msg_show = true
							this.sender_info = res.data.sender_info
						} else {
							this.sender_msg_show = false
						}
						// 有代收货款权限
						if (res.data.agency_fund == true) {
							this.agency_fund_show = true
						} else {
							this.agency_fund_show = false
						}
					})
					this.$https.get('api/mini_customer/v1/base/address_lib')
					.then(res => {
						this.array = res.data
					})
				},
				fail: res => {
					uni.redirectTo({
						url: '../login/login'
					})
				}
			})
		},
		methods: {
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', this.array[e.target.value])
			    this.index = e.target.value
				this.addr_show = true
			},
			// 限制输入小数点后两位
			oninput (e) {
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.agent_fee = e.target.value
				})
				console.log(e.target.value)
				if (e.target.value == null){
					this.$nextTick(() => {
						this.agent_fee = ''
					})
				}
			},
			// 粘贴识别
			paste () {
				uni.getClipboardData({
					success: res => {
						console.log(res.data)
						// 成功后调接口传剪切板上的内容
						this.$https.post('api/mini_customer/v1/orders/address_parse',{
							token: this.token,
							address: res.data
						})
						.then(res => {
							// 回显表单内容
							if (res.data.city != ''){
								this.addr_show = true
							}
							this.receiver_name = res.data.name
							this.receiver_phone = res.data.mobile
							this.array[this.index] = res.data.area
							this.receiver_address = res.data.addr
						})
					},
					fail: res => {
						console.log(res)
						uni.showModal({
							title: '提示',
							content: '识别失败，请重新复制后重试',
							showCancel:true
						})
					}
				})
			},
			// 清空表单
			reset_receiver (e) {
				this.addr_show = false
				this.value = ''
				this.receiver_name = ''
				this.receiver_phone = ''
				this.receiver_address = ''
				this.receiver_remark = ''
				this.agent_fee = ''
			},
			// 选择省市区
			change (data) {
				console.log(data)
				this.txt = data.data.join('')
				this.addr_show = true
				this.receiver_province = data.data[0]
				this.receiver_city = data.data[1]
				this.receiver_district = data.data[2]
			},
			// 提交面单
			submit (e) {
				this.receiver_name = e.detail.value.receiver_name
				console.log(e.detail.value)
				// 表单验证
				if (e.detail.value.receiver_name === '' || e.detail.value.receiver_name === ' ') {
					uni.showModal({
						title: '提示',
						content: '请输入收件人姓名',
						showCancel: false
					})
				} else if (e.detail.value.receiver_phone === '' || e.detail.value.receiver_phone === ' '){
					uni.showModal({
						title: '提示',
						content: '请输入收件人电话号码',
						showCancel: false
					})
				} else if (this.addr_show == false){
					uni.showModal({
						title: '提示',
						content: '请选择区',
						showCancel: false
					})
				} else if (e.detail.value.receiver_address === '' || e.detail.value.receiver_address === ' '){
					uni.showModal({
						title: '提示',
						content: '请填写详细地址',
						showCancel: false
					})
				} else {
					//提交
					console.log('--提交数据--')
					this.$https.post('api/mini_customer/v1/orders/create',{
						token: this.token,
						receiver_name: e.detail.value.receiver_name,
						receiver_phone: e.detail.value.receiver_phone,
						receiver_address: e.detail.value.receiver_address,
						receiver_province: '吉林省',
						receiver_city: '长春市',
						receiver_district: this.array[this.index],
						receiver_remark: e.detail.value.receiver_remark,
						agent_fee: e.detail.value.agent_fee
					})
					.then(res => {
						this.reset_receiver()
						this.receiver_name = ''
						this.receiver_phone = ''
						this.receiver_address = ''
						this.receiver_remark = ''
						this.agent_fee = ''
						console.log(e.detail.value.receiver_name)
						uni.showModal({
							title:'提示',
							content: '运单创建成功！可在我的寄件中查看此运单',
							showCancel: false
						})
					})
				}
			},
			// 跳转添加寄件信息
			go_add_sender_msg () {
				uni.navigateTo({
					url: '../senderMsg/senderMsg'
				})		
			},
			// 数字转大写
			smallToBig(money) {
				//  将数字金额转换为大写金额
				var cnNums = new Array(
					"零",
					"壹",
					"贰",
					"叁",
					"肆",
					"伍",
					"陆",
					"柒",
					"捌",
					"玖"
				  ); //汉字的数字
				var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
				var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
				var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
				var cnInteger = "整"; //整数金额时后面跟的字符
				var cnIntLast = "元"; //整数完以后的单位
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				var integerNum; //金额整数部分
				var decimalNum; //金额小数部分
				//输出的中文金额字符串
				var chineseStr = "";
				var parts; //分离金额后用的数组，预定义
				if (money == "") {
					return "";
				}
				money = parseFloat(money);
				if (money >= maxNum) {
				//超出最大处理数字
					return "超出最大处理数字";
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
					return chineseStr;
				}
					
				//四舍五入保留两位小数,转换为字符串
				money = Math.round(money * 100).toString();
				integerNum = money.substr(0, money.length - 2);
				decimalNum = money.substr(money.length - 2);
					
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == "0") {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
							  chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != "") {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != "0") {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == "") {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
					chineseStr += cnInteger;
				}
				return chineseStr;  
			}
		}
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
		overflow-x: hidden;
	}
	.msg_box,.receiver_msg_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		background: #ffffff;
		border-radius: 12rpx;
		padding-bottom: 24rpx;
	}
	.sender_msg_box_title,.receiver_msg_box_title{
		padding-top:24rpx;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.sender_msg_box_title view{
		line-height: 30rpx;
	}
	.sender_msg_box_title img,.receiver_msg_box_title img{
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
	}
	.sender_msg_box{
		margin-top: 48rpx;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
	}
	.sender_msg{
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 32rpx;
	}
	.sender_phone{
		margin-left: 24rpx;
	}
	.sender_address{
		margin-top: 18rpx;
		color: #666666;
		font-size: 28rpx;
	}
	.receiver_msg_title{
		display: flex;
		align-items: center;
	}
	.receiver_msg_box_title{
		justify-content: space-between;
	}
	.paste_btn{
		margin-right: 24rpx;
		background-color: #13A684;
		border-radius: 12rpx;
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		font-size: 28rpx;
	}
	.name{
		padding-bottom: 24rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 24rpx;
		width: 200rpx;
	}
	.phone{
		padding-bottom: 24rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 24rpx;
		width: 430rpx;
	}
	.name_phone_box{
		display: flex;
		margin-top: 48rpx;
	}
	.placeholder{
		color: #999999;
		font-size: 32rpx;
		margin-left: 14rpx;
	}
	.address{
		padding-bottom: 24rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 24rpx;
		width: 654rpx;
		margin-top: 48rpx;
		font-size: 32rpx;
	}
	.reset_btn{
		width: 140rpx;
		height: 60rpx;
		margin-left:538rpx;
		border: 2rpx solid #13A684;
		color: #13A684;
		border-radius: 12rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		background: #ffffff;
	}
	.fenge{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		border-top: 2rpx dashed #eeeeee;
	}
	.agent_fee_box{
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #333333;
		margin-left: 24rpx;
	}
	.agent_fee{
		width: 200rpx;
		height: 72rpx;
		border-radius: 12rpx;
		background: #D1E0DA;
		font-size: 32rpx;
		text-align: center;
		margin-right: 12rpx;
		margin-left: 12rpx;
		color: #13A684;
	}
	.large_number{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666666;
		padding-bottom: 24rpx;
	}
	.submit_btn{
		width: 100%;
		height: 100rpx;
		position: fixed;
		border-radius: 0;
		bottom: 0;
		background: #13A684;
		color: white;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		z-index: 100;
	}
	.receiver_msg_box{
		margin-bottom: 124rpx;
	}
	.sender_msg_tips{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 48rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.add_sender_btn{
		font-size: 28rpx;
		/* padding: 10rpx 14rpx 10rpx 14rpx; */
		color: #13A684;
		border-radius: 12rpx;
		border: 2rpx solid #13A684;
		margin-top: 24rpx;
		margin-left: 482rpx;
		width: 196rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.uni-list-cell-db{
		display: flex;
		align-items: center;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 48rpx;
		border-bottom: 1px solid #eeeeee;
		padding-bottom: 24rpx;
		color: #333333;
		font-size: 32rpx;
	}
</style>
